<template>
    <div>
        <el-card class="dashboard  text-center">
            <img src="../assets/images/xxdt-logo.png" class="my-0 mx-auto">
            <div class="mb-2">你好，欢迎来到角色地图应用管理后台。</div>
            <div class="mb-2">今天是
                {{ getDate.year }}年
                {{ getDate.month }}月
                {{ getDate.day }}日，
                星期{{ getDate.weekday }}</div>
        </el-card>
        <el-card class="mt-4" v-if="!my.company_id">
            <div slot="header" class="clearfix">
                <span>{{ getDateTime(time).getFullYear() }} {{ getDateTime(time).getMonth() + 1 }}月份数据</span>
                <div style="float: right;" class="ml-auto">
                    <el-date-picker
                        v-model="time"
                        type="month"
                        value-format="timestamp"
                        @change="getStatistics"
                        :clearable="false"
                        :picker-options="{
                            disabledDate: (time) => {
                                const datetemp = new Date();
                                let year = datetemp.getFullYear();
                                let month = datetemp.getMonth();
                                timeDate = new Date(year, month, 1);

                                if (new Date(time).getTime() >= new Date('2022/10/1').getTime()
                                    && new Date(time).getTime() < new Date(timeDate).getTime()) return false;
                                return true;
                            }
                        }"
                        placeholder="选择月份">
                    </el-date-picker>
                </div>
            </div>
            <div v-for="(o, i) in optionData" :key="i" class="text">
                {{ o.name }}: {{ o.value }}
            </div>
        </el-card>
    </div>
</template>

<script>
import GetWeekDate from '@/helpers/GetWeekDate';

export default {
    components: {
    },
    data() {
        return {
            optionData: [],
            time: '',
        };
    },
    created() {
    },
    mounted() {
        if (!this.my.company_id) this.getStatistics();
    },
    methods: {
        getStatistics() {
            let time = new Date();
            if (this.time) {
                time = this.getDateTime(this.time);
            } else time = this.getDateTime();
            API.get(`administrator/monthly_statistics/${time.getTime()}`).then((res) => {
                this.optionData = [
                    {value: res.ge_fifteen || 0, name: '累计学习时长大于等于15分钟的用户数量'},
                    {value: res.ge_thirty || 0, name: '累计学习时长大于等于30分钟的用户数量'},
                    {value: res.ge_sixty || 0, name: '累计学习时长大于等于60分钟的用户数量'},
                    {value: res.least_video || 0, name: '至少访问过1个岗位角色视频的用户数量'},
                    {value: res.ave_video || 0, name: '平均一个用户访问过岗位角色视频的视频数量'},
                    {value: res.valid_user_nums || 0, name: '有效期内的注册用户'},
                    {value: res.user_nums || 0, name: '总注册用户'},
                ];
            });
        },
        getDateTime(time) {
            let timeDate = new Date();
            if (time) {
                timeDate = new Date(time);
            } else {
                const datetemp = new Date();
                let year = datetemp.getFullYear();
                let month = datetemp.getMonth();
                if (!month) {
                    year -= 1;
                    month = 11;
                }
                // 获取的是上一月数据
                timeDate = new Date(year, month - 1, 1);
            }
            return timeDate;
        },
    },
    computed: {
        getDate() {
            return new GetWeekDate().getDate();
        },

        my() {
            return this.$store.state.my;
        },
    },
};
</script>

<style lang="scss">
    .dashboard {
        img {
            width: 200px;
        }
    }

    .text {
        font-size: 14px;
        margin-bottom: 18px;
    }
</style>
